/*
* Copyright (c) 2025 Huawei Device Co., Ltd.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including but not limited to the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to provide persons with access to the Software
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGE OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/

import React, { useState, useEffect } from 'react';
import './PlaylistHeaderTable.css';

const NewPlaylistHeaderTable = ({ bottomAvoidArea }) => {
  const imageNumber = '3456万';
  const playlistTitle = '轻快旋律：这里是疲倦灵魂栖息地';
  const playlistDescription =
    '怀旧使我快乐，人们总是以为自己的生活很枯燥/乏味，那是因为他们没有回过头来聆听那些曾陪伴过我们青春的旋律';
  const fourImages = [
    require('../../../assets/playList/love_count.png'),
    require('../../../assets/playList/download_count.png'),
    require('../../../assets/playList/commen_count.png'),
    require('../../../assets/playList/share.png'),
  ];
  const [windowHeight, setWindowHeight] = useState(window.innerHeight - 80);

  useEffect(() => {
    const handleResize = () => {
      setWindowHeight(window.innerHeight + (bottomAvoidArea ? 0 : 30));
    };

    handleResize();
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  const containerStyle = {
    height: `${windowHeight * 0.75}px`,
    width: `${(windowHeight * 0.75 * 384) / 596}px`,
  };

  return (
    <div className="container-header-larger" style={containerStyle}>
      <img
        className="playlist-image-larger"
        src={require('../../../assets/playList/cover.png')}
        alt="Playlist cover"
      />
      <span className="image-number-larger">{imageNumber}</span>
      <h1 className="text-title-larger">{playlistTitle}</h1>
      <p className="text-description-larger">{playlistDescription}</p>
      <p className="author-larger">Christopher</p>

      <div className="images-row-larger">
        {fourImages.map((image, index) => (
          <img
            key={index}
            src={image}
            className="four-image-larger"
            alt={`Action button ${index}`}
          />
        ))}
      </div>
    </div>
  );
};

export default NewPlaylistHeaderTable;
